<form [formGroup]="form" class="attribute-form">
  <cnsl-form-field class="formfield">
    <cnsl-label>{{ 'IDP.LDAPIDATTRIBUTE' | translate }}</cnsl-label>
    <input cnslInput formControlName="idAttribute" required />
  </cnsl-form-field>

  <div class="attribute-more-row">
    <span>{{ 'ACTIONS.MORE' | translate }}</span>
    <button (click)="showMore = !showMore" type="button" mat-icon-button>
      <mat-icon *ngIf="showMore">keyboard_arrow_up</mat-icon>
      <mat-icon *ngIf="!showMore">keyboard_arrow_down</mat-icon>
    </button>
  </div>

  <ng-container *ngIf="showMore">
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'IDP.AVATARURLATTRIBUTE' | translate }}</cnsl-label>
      <input cnslInput formControlName="avatarUrlAttribute" />
    </cnsl-form-field>
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'IDP.DISPLAYNAMEATTRIBUTE' | translate }}</cnsl-label>
      <input cnslInput formControlName="displayNameAttribute" />
    </cnsl-form-field>
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'IDP.EMAILATTRIBUTEATTRIBUTE' | translate }}</cnsl-label>
      <input cnslInput formControlName="emailAttribute" />
    </cnsl-form-field>
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'IDP.EMAILVERIFIEDATTRIBUTE' | translate }}</cnsl-label>
      <input cnslInput formControlName="emailVerifiedAttribute" />
    </cnsl-form-field>
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'IDP.FIRSTNAMEATTRIBUTE' | translate }}</cnsl-label>
      <input cnslInput formControlName="firstNameAttribute" />
    </cnsl-form-field>
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'IDP.LASTNAMEATTRIBUTE' | translate }}</cnsl-label>
      <input cnslInput formControlName="lastNameAttribute" />
    </cnsl-form-field>
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'IDP.NICKNAMEATTRIBUTE' | translate }}</cnsl-label>
      <input cnslInput formControlName="nickNameAttribute" />
    </cnsl-form-field>
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'IDP.PHONEATTRIBUTE' | translate }}</cnsl-label>
      <input cnslInput formControlName="phoneAttribute" />
    </cnsl-form-field>
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'IDP.PHONEVERIFIEDATTRIBUTE' | translate }}</cnsl-label>
      <input cnslInput formControlName="phoneVerifiedAttribute" />
    </cnsl-form-field>
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'IDP.PREFERREDLANGUAGEATTRIBUTE' | translate }}</cnsl-label>
      <input cnslInput formControlName="preferredLanguageAttribute" />
    </cnsl-form-field>
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'IDP.PREFERREDUSERNAMEATTRIBUTE' | translate }}</cnsl-label>
      <input cnslInput formControlName="preferredUsernameAttribute" />
    </cnsl-form-field>
    <cnsl-form-field class="formfield">
      <cnsl-label>{{ 'IDP.PROFILEATTRIBUTE' | translate }}</cnsl-label>
      <input cnslInput formControlName="profileAttribute" />
    </cnsl-form-field>
  </ng-container>
</form>
